<template>
  <Modal
    :styles="{ top: '120px' }"
    width="500"
    :z-index="10000"
    @on-cancel="clickClose"
    footer-hide
    v-model="flag"
    :mask-closable="false"
    scrollable
  >
    <template v-if="flag">
      <Form
        ref="form"
        :model="walletForm"
        :rules="ruleValidate"
        :label-width="70"
        class="wallet-form"
      >
        <Form-item label="金额" prop="money">
          <Input
            type="number"
            v-model="walletForm.money"
            placeholder="请输入金额"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item label="明细备注" prop="detail">
          <Input
            type="textarea"
            v-model="walletForm.detail"
            placeholder="请输入明细备注"
            clearable
            style="width: 200px"
          />
        </Form-item>
        <Form-item style="text-align: right">
          <Button @click="clickClose" style="margin-right: 20px">取消</Button>
          <Button type="primary" @click="clickOK">确定</Button>
        </Form-item>
      </Form>
    </template>
  </Modal>
</template>
<script>
import * as API_Member from "@/api/member.js";
export default {
  data() {
    const validateMoney = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入金额"));
      } else {
        if (+value <= 0) {
          // 对第二个密码框单独验证
          callback(new Error("请输入大于0的金额"));
        } else {
          callback();
        }
      }
    };
    return {
      flag: false,
      type: "", // 1：增加金额 2: 减少金额
      walletForm: {
        money: "",
        detail: "",
      },
      ruleValidate: {
        money: [
          {
            validator: validateMoney,
            required: true,
            trigger: "blur",
          },
        ],
        detail: [
          { required: true, message: "明细备注不能为空", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    memberId: {
      type: String,
    },
    reload: {
      type: Function,
    },
  },
  methods: {
    clickClose() {
      this.flag = false;
      this.walletForm = {};
    },
    show(type) {
      this.flag = true;
      this.type = type;
    },
    clickOK() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.walletForm.memberId = this.memberId;
          const method =
            this.type === "1"
              ? API_Member.increaseWallet
              : this.type === "2"
              ? API_Member.reduceWallet
              : "";
          method
            ? method(this.walletForm).then((v) => {
                this.$Message.success("操作成功");
                this.reload && this.reload();
                this.walletForm = {};
                this.clickClose();
              })
            : "";
        }
      });
    },
  },
};
</script>
